<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style>
        td{
         text-align: center;
        }
        button{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<table border="1" cellspacing="0" align="center">
    <tr>
        <td colspan="4"><input id="result" /></td>
    </tr>
    <tr>
        <td><button onclick="mAc()">AC</button></td><td><button onclick="mBack()">←</button></td><td><button name="baiFen" onclick="mBaiFen()">%</button></td><td><button name="chu" onclick="mChu()">÷</button></td>
    </tr>
    <tr>
        <td><button onclick="m7()">7</button></td><td><button onclick="m8()">8</button></td><td><button onclick="m9()">9</button></td><td><button name="cheng" onclick="mMultiply()">×</button></td>
    </tr>
    <tr>
        <td><button onclick="m4()">4</button></td><td onclick="m5()"><button>5</button></td><td><button onclick="m6()">6</button></td><td><button name="jian" onclick="mReduce()">-</button></td>
    </tr>
    <tr>
        <td><button onclick="m1()">1</button></td><td><button onclick="m2()">2</button></td><td><button onclick="m3()">3</button></td><td><button name="jia" onclick="mAdd()">+</button></td>
    </tr>
    <tr>
        <td><button onclick="mPoint()">.</button></td><td><button onclick="m0()">0</button></td><td colspan="2"><button onclick="mDeng()">=</button></td>
    </tr>
</table>
<script>
    var num1 = 0;

    function mAc() {
        result.value = null;
    }
    function mDeng() {
        // switch () {
        //     case 0:
        //         result.value = parseFloat(result.value) + num1;
        //         break;
        //     case 1:
        //         result.value = parseFloat(result.value) - num1;
        //         break;
        //     case 2:
        //         result.value = parseFloat(result.value) * num1;
        //         break;
        //     case 3:
        //         result.value = parseFloat(result.value) / num1;
        //         break;
        //     case 4:
        //         result.value = parseFloat(result.value) * 0.01;
        //         break;
        //
        // }
        result.value = parseFloat(result.value) + num1;

    }
    function mPoint() {
        if (result.value.indexOf(".") == -1)
            result.value = result.value + ".";
    }
    function mAdd() {
        num1 = parseFloat(result.value);
        result.value = "";
    }
    function mReduce() {
        num1 = parseFloat(result.value);
        result.value = "";
    }
    function mMultiply() {
        num1 = parseFloat(result.value);
        result.value = "";
    }
    function mChu() {
        num1 = parseFloat(result.value);
        result.value = "";
    }
    function mBack() {
        num1 = parseFloat(result.value);
        result.value = "";
    }
    function mBaiFen() {
        num1 = parseFloat(result.value);
        result.value = "";
    }
    function m0() {
        result.value = result.value + "0";
    }
    function m1() {
        result.value = result.value + "1";
    }
    function m2() {
        result.value = result.value + "2";
    }
    function m3() {
        result.value = result.value + "3";
    }
    function m4() {
        result.value = result.value + "4";
    }
    function m5() {
        result.value = result.value + "5";
    }
    function m6() {
        result.value = result.value + "6";
    }
    function m7() {
        result.value = result.value + "7";
    }
    function m8() {
        result.value = result.value + "8";
    }
    function m9() {
        result.value = result.value + "9";
    }
</script>

</body>
</html>